<template>
  <div class="article-container" v-loading.fullscreen.lock="fullscreenLoading">
    <!-- 左侧点赞和打赏 -->
    <div class="left-sidbarnav" :style="{ left: left }">
      <el-tooltip class="item" effect="dark" content="点赞" placement="left">
        <div class="left_item" title="点赞" @click="doLike">
          <el-badge :value="article.likeVolume == null ? 0 : article.likeVolume" class="item">
            <span>
              <i v-if="article.likeStatus" class="iconfont icon-dianzan4"></i>
              <i v-else class="iconfont icon-dianzan1"></i>
            </span>
          </el-badge>
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="收藏" placement="left">
        <div class="left_item" title="收藏" @click="doCollect">
          <el-badge :value="article.collectVolume" class="item">
            <span style="font-size: 16px">
              <el-icon v-if="article.collectStatus">
                <StarFilled />
              </el-icon>
              <el-icon v-else>
                <Star />
              </el-icon>
            </span>
          </el-badge>
        </div>
      </el-tooltip>
      <!-- 评论 -->
      <el-tooltip class="item" effect="dark" content="评论" placement="left">
        <div class="left_item hand_style" title="评论" @click="handleNodeClick('comment')">
          <el-badge :value="article.commentVolume" class="item">
            <span>
              <el-icon>
                <ChatLineRound />
              </el-icon>
            </span>
          </el-badge>
        </div>
      </el-tooltip>
      <!-- 沉浸式阅读 -->
      <el-tooltip class="item" effect="dark" content="开启沉浸式阅读" placement="left">
        <div class="left_item hand_style" title="开启沉浸式阅读" @click="handleImmerse">
          <span>
            <i class="iconfont icon-full-screen"></i>
          </span>
        </div>
      </el-tooltip>
      <!-- 打赏 -->
      <el-tooltip class="item" effect="dark" content="打赏" placement="left" v-if="supportShow">
        <div class="left_item rewardMain hand_style" title="打赏">
          <span class="reward-btn">
            <i class="iconfont icon-dashang1"></i>
          </span>
          <!-- 二维码 -->
          <div class="rewardItem">
            <span v-for="(item,index) in erCodeList" :key="index">
              <img class="reward-img" :src="item.erCode" />
            </span>
          </div>
        </div>
      </el-tooltip>
    </div>

    <!-- 中间文章信息 -->
    <el-card class="article" id="articleBox">
      <h1 class="article-title">
        {{ article.title }}
      </h1>
      <div class="tips">
        <div class="tips_item">
          <el-image
            v-if="article.pushType == 0"
            class="type_img"
            src="http://localhost:8128/img/tag/original.png"
          />
          <el-image
            v-if="article.pushType == 1"
            class="type_img"
            src="http://localhost:8128/img/tag/reprint.png"
          />
          <span class="author">
            {{ article.authorName }}
          </span>
          <span class="textItem">
            <svg-icon icon-class="duration" />
            于 {{ article.createTime }}发布
          </span>
          
          <span class="textItem">
            <svg-icon icon-class="eye" />
            阅读量 {{ article.readVolume }}
          </span>

          <span class="textItem">
            <svg-icon icon-class="duration" />
            收藏 {{ article.collectVolume }}
          </span>

          <span class="textItem">
            <svg-icon icon-class="like" />
            点赞数 {{ article.likeVolume }}
          </span>
        </div>
        <div class="tag">
          <span class="tag_title">文章标签：</span>
          <span v-for="(item, index) in article.checkedTagList" :index="index" @click="handleClike(item, '/category')"
            class="category">
            {{ item }}
          </span>
        </div>
      </div>

      <!-- 文章内容 -->
      <div style="height: 100%" class="box-article" ref="articleRef">
        <v-md-editor v-model="article.content" mode="preview" @copy-code-success="handleCopyCodeSuccess"></v-md-editor>
      </div>

      <div class="comment-mian" id="comment">
        <div class="title">
          <svg-icon icon-class="message"></svg-icon>
          评论
          <span style="color: var(--text-color); font-size: 20px">发表评论,来抢沙发</span>
        </div>
        <Comment :articleUserId="article.userId" />
      </div>
    </el-card>
    <!-- 右边侧边栏 -->
    <div class="sidebar" v-if="rightShow">
      <div style="position: sticky; top: 70px">
        <div class="directory" v-if="titles.length">
          <el-card class="directory-item">
            <template #header>
              <div style="color: var(--article-color)">
                <i class="iconfont icon_menu_normal"></i> 
                  <span style="font-size: 22px;
                    font-family: 'Ali_M'">文档目录</span>
              </div>
            </template>
            <el-scrollbar max-height="500px">
              <ul>
                <li ref="directoryItem" :class="active == index 
      ? 'structure active'
      : 'structure'
    " v-for="(anchor, index) in titles" :key="index" @click="handleAnchorClick(anchor, index)" :style="{ paddingLeft: `${5 + anchor.indent * 30}px` }">
                  <a>{{ anchor.title }}</a>
                </li>
              </ul>
            </el-scrollbar>
          </el-card>
        </div>
      </div>
    </div>
    <image-preview :img="images"></image-preview>
  </div>
</template>
<script setup name="Article">
import {
  getArticleInfo,
} from "@/api/ams/article";
// 打赏
import { listSupport } from "@/api/operate/support";
import { collectAdd,collectCancel } from "@/api/ams/collect";
// 点赞
import { addLike,cancelLike } from "@/api/ams/like";
import Comment from "@/components/comment/index.vue";
import imagePreview from "@/components/image-preview/index.vue";
import { useUserStore } from "@/store/moudel/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const article = ref({
  category: {},
  comments: [],
  tagList: [],
});
// 打赏相关
// 二维码
const erCodeList = ref([]);
// 打赏按钮显示
const supportShow = ref(false);
const rightShow = ref(true);
const code = ref(null);
const style = ref("");
const titles = ref([]);
const images = ref({});
const active = ref(0);
const articleId = ref(route.query.articleId);
const serceShow = ref(0);
const left = ref("0px");
const timer = ref(null);
const articleRef = ref(null);
const directoryItem = ref();
const fullscreenLoading = ref(true);

onMounted(() => {
  const element = document.getElementById("articleBox");
  left.value = (element.offsetLeft - 80)+ "px";
  // 监听滚动事件
  window.addEventListener("scroll", onScroll, false);

  // const scrollContainer = document.querySelector('.article-container');
  // if (scrollContainer){
  //   scrollContainer.addEventListener('scroll', readerScroll);
  // }
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  window.removeEventListener("scroll", onScroll);
});
onUnmounted(() => {
//这里请按照自己的页面的元素来修改
  const scrollContainer = document.querySelector('.article-container');
  if (scrollContainer) {
    scrollContainer.removeEventListener('scroll', handleScroll);
  }
});

window.addEventListener(
  "resize",
  () => {
    const element = document.getElementById("articleBox");
    if (element) {
      left.value = (element.offsetLeft - 80) + "px";
    }
  },
  true
);
// 查看文章详情
getArticleInfo(articleId.value)
  .then((res) => {
    article.value = res.data;
    serceShow.value = article.value.activeReadType;
    if (article.value.readType != 0 && !serceShow.value) {
      style.value = "max-height: 1200px;overflow: hidden;";
    }

    //处理目录和图片预览
    nextTick(() => {
      //添加图片预览功能
      const imgList = articleRef.value.getElementsByTagName("img");
      for (var i = 0; i < imgList.length; i++) {
        imgList[i].addEventListener("click", function (e) {
          images.value = {
            urls: e.target.currentSrc,
            time: new Date().getTime(),
          };
        });
      }
      // 生成目录
      fetchMarkdownTitles();
    });

    //修改标题和关键词
    document.title = article.value.title;
    if (article.value.keywords != null) {
      document
        .querySelector('meta[name="keywords"]')
        .setAttribute("content", article.value.keywords);

      document
        .querySelector('meta[name="description"]')
        .setAttribute("content", article.value.summary);
    }
  })
  .finally(() => (fullscreenLoading.value = false));
// 新增
  const getMarkdownTitles = async () => {
  await nextTick();

  const anchors = articleRef.value.querySelectorAll("h1,h2,h3,h4,h5,h6");
  const titles = Array.from(anchors).filter((title) => !!title.innerText.trim());

  if (!titles.length) {
    return [];
  }

  const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();
  return titles.map((el) => ({
    title: el.innerText,
    lineIndex: el.getAttribute("data-v-md-line"),
    indent: hTags.indexOf(el.tagName),
  }));
  
};

// 在需要的位置直接调用生成目录
const fetchMarkdownTitles = async () => {
  titles.value = await getMarkdownTitles();
};

// 添加用于更新 active 类的函数
const updateActiveClass = () => {
  //修改成你自己的元素
  const titlesElements = document.querySelectorAll('.directory-item');
  titlesElements.forEach((title, index) => {
    title.classList.toggle('active', active.value === index);
  });
};

const handleAnchorClick = async (anchor, idx) => {
  await nextTick();
  const heading = articleRef.value.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
  if (heading) {
    window.scrollTo({
      top: heading.offsetTop,
      behavior: 'smooth',
    });

    // 更新active
    active.value = idx;
    updateActiveClass();
  }
};

// 赋值代码
function handleCopyCodeSuccess(code) {
  console.log(code);
}

//校验是否登录
function handleValidateLogin() {
  if (!userStore.getUserInfo) {
    userStore.setLoginFlag(true);
    return;
  }
}
//滚动
function onScroll() {
  const headings = articleRef.value.querySelectorAll("h1,h2,h3,h4,h5,h6");

  // 找到当前在视图中的标题
  let currentHeading = null;
  for (let i = 0; i < headings.length; i++) {
    const heading = headings[i];
    const rect = heading.getBoundingClientRect();
    const scrollContainer = document.querySelector('.article-container');
    // 判断标题元素中心是否在视图中
    if (rect.top <= scrollContainer.clientHeight / 2 && rect.bottom >= 0) {
      currentHeading = heading;
      break;
    }
  }

  // 根据当前标题更新 active
  if (currentHeading) {
    const lineIndex = currentHeading.getAttribute("data-v-md-line");
    const index = titles.value.findIndex((anchor) => anchor.lineIndex === lineIndex);

    if (index !== -1 && active.value !== index) {
      active.value = index;
      updateActiveClass();
    }
  }
  // const scrollTop =
  //   document.documentElement.scrollTop || document.body.scrollTop;
  // for (let i = 0; i < titles.value.length; i++) {
  //   //获取小标题距离屏幕顶端的距离
  //   var offsetTop = document.getElementById(titles.value[i].id).offsetTop;
  //   //根据条件做出判断，我这里是当小标题和屏幕顶端的距离小于300且没有被标明在读时，就将其背景颜色改变。
  //   if (offsetTop - scrollTop < 80 && offsetTop - scrollTop > 0) {
  //     active.value = i;
  //   }
  // }
}

//沉浸式阅读
function handleImmerse() {
  rightShow.value = !rightShow.value;
  window.setTimeout(() => {
    const element = document.getElementById("articleBox");
    left.value = (element.offsetLeft - 80) + "px";
  }, 10);
}

//收藏或取消
function doCollect() {
  handleValidateLogin();
  let articleId = article.value.id;
  let data = {articleId: articleId};
  if (article.value.collectStatus) {
    collectCancel(data).then((res) => {
      article.value.collectVolume--;
      article.value.collectStatus = 0;
      proxy.$modal.msg("取消收藏");
    });
  } else {
    collectAdd(data).then((res) => {
      article.value.collectVolume++;
      article.value.collectStatus = 1;
      proxy.$modal.msgSuccess("收藏成功");
    });
  }
}

//带参数跳转页面
function handleClike(id, path) {
  router.push({ path: path, query: { id: id } });
}


// 获取打赏二维码
function getSupportCode() {
  listSupport().then(res => {
    if(res.code == 200) {
      erCodeList.value = res.data.list;
      supportShow.value = true;
    }
  })
}
//点赞
function doLike() {
  handleValidateLogin();
  let articleId = article.value.id;
  let data = {articleId: articleId};
  if (article.value.likeStatus) {
    cancelLike(data).then((res) => {
      article.value.likeVolume--;
      article.value.likeStatus = 0;
      proxy.$modal.msg("取消点赞");
    });
  } else {
    addLike(data).then((res) => {
      article.value.likeVolume++;
      article.value.likeStatus = 1;
      proxy.$modal.msgSuccess("为你点赞");
    });
  }
}

getSupportCode();
</script>
<style lang="scss" scoped>
.article-container {
  padding: 10px;
  display: flex;
    justify-content: center;
  .read-duration {
    border-left: 5px solid #50bfff;
    background-color: var(--tips-backgroud-color);
    color: #bf5dd8;
    padding: 10px 0;
    margin-top: 15px;
    padding-left: 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  @media screen and (max-width: 1118px) {
    .article {
      width: 100%;

      .article-desc {
        .time {
          display: none;
        }
      }

      .dianzanBox {
        text-align: center;
        margin-top: 15px;

        .dianzan-item {
          i {
            font-size: 16px;
          }

          .likeCountItem {
            color: var(--text-color);
            font-size: 12px;
          }

          svg {
            width: 30px;
            height: 30px;
            vertical-align: -10px;
          }
        }
      }
    }

    .left-sidbarnav,
    .sidebar {
      display: none;
    }
  }

  @media screen and (min-width: 1119px) {
    ::v-deep(.el-dialog) {
      width: 24%;
      border-radius: 10px;
    }

    .article {
      width: 50%;

      .dianzanBox {
        display: none;
      }

      .article-desc {
        .time {
          font-size: 32px;
          line-height: 42px;
          color: orange;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
          position: absolute;
          right: 0;
        }
      }
    }

    .left-sidbarnav {
      position: fixed;
      top: 150px;
      z-index: 999;

      .left_item {
        margin-bottom: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        background-color: var(--background-color);
        position: relative;
        color: var(--text-color);
        cursor: pointer;
        &:hover {
          span {
            color: var(--theme-color);
          }

          background-color: rgba(25, 153, 153, 0.2);
        }

        i,
        .el-icon {
          font-size: 20px;
        }

        .el-icon {
          vertical-align: -2px;
        }

        .like-count {
          color: #fff;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          position: absolute;
          line-height: 20px;
          background-color: var(--theme-color);
          top: -8px;
        }

        .rewardItem {
          position: absolute;
          bottom: -15px;
          left: 52px;
          margin: 0;
          padding: 0 0 15px;
          background-color: #5956563e;
          border-radius: 5px;
          display: none;

          .reward-img {
            margin-left: 5px;
            margin-right: 5px;
            width: 275px;
            height: 300px;
            margin-top: 12px;
          }
        }
      }

      .rewardMain {
        &:hover {
          .rewardItem {
            display: flex;
            animation: left-in 1s ease;

            @keyframes left-in {
              0% {
                transform: translateY(-50%);
              }

              100% {
                transform: translateX(0);
              }
            }
          }
        }
      }
    }

    .sidebar {
      margin-left: 20px;
      margin-top: 80px;
      width: 20%;

      .directory {

        .directory-item {
          background-color: var(--background-color);
          ul {
            margin-top: 8px;
            list-style: none;
            padding: 0 10px;

            &::-webkit-scrollbar {
              display: none;
            }
          }

          ::v-deep(.el-card__header) {
            padding: 15px 20px;
            border-bottom: 2px solid var(--border-line);
          }

          .title {
            display: flex;

            i {
              font-size: 20px;
              margin-right: 10px;
            }

            ::v-deep(.toc-title) {
              color: var(--article-color) !important;
            }
          }

          .structure {
            cursor: pointer;
            color: var(--article-color);
            padding: 5px 0;
            padding-left: 20px;
            margin-bottom: 10px;
          }

          .active {
            // font-size: 120px;
            transition: all 0.25s ease-in-out;
          }

          .active,
          .structure:hover {
            span {
              color: var(--theme-color);
            }

            border-radius: 5px;
            background-color: var(--article-structure-backcolor);
          }
        }
      }
    }
  }

  .article {
    background-color: var(--background-color);
    padding: 20px;
    height: 100%;
    margin-top: 80px;
    .article-title {
      font-size: 24px;
      color: var(--article-color);
      text-align: center;
      padding-top: 20px;
      margin-bottom: 15px;
      word-break: break-word;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      font-weight: 500;

      svg {
        width: 50px;
        height: 50px;
        vertical-align: -10px;
      }
    }

    .article-desc {
      height: 50px;
      position: relative;
      display: flex;
      align-items: center;


      .article-item {
        display: flex;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
          padding: 3px;
          -o-object-fit: cover;
          object-fit: cover;
          background: var(--border-line);
          border: 1px solid #dcdfe6;
        }

        .meta {
          display: flex;
          flex-direction: column;
          height: 35px;
          justify-content: space-between;
          font-size: 12px;

          .link {
            font-weight: 500;
            color: var(--theme-color);
          }

          .item {
            color: #909399;
            line-height: 16px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }
        }
      }
    }

    .divider {
      width: 100%;
      height: 2px;
      margin: 20px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      .first {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        background: #409eff;
      }

      ::v-deep(.el-icon) {
        margin: -16px -10px;
        color: #67c23a;
        font-size: 20px;
      }

      .second {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background: #e6a23c;
      }
    }

    .tips {
      border-left: 5px solid #50bfff;
      background-color: var(--tips-backgroud-color);
      color: #888;
      border-radius: 5px;
      padding: 10px;
      animation: overdue 2s ease-in-out;

      @keyframes overdue {
        0% {
          -webkit-clip-path: circle(0 at 0 0);
          clip-path: circle(0 at 0 0);
        }

        100% {
          -webkit-clip-path: circle(100%);
          clip-path: circle(100%);
        }
      }
      .tips_item {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .type_img {
          width: 36px;
          height: 2px;
          margin-right: 2px
        }
        .author {
          margin-right: 6px;
          cursor: pointer;
        }
        .author:hover {
          color: #67c23a;
        }
        .textItem {
          margin-right: 6px;
          font-size: 16px;
        }
      }
      .tag {
        padding-left: 48px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 16px;
        .category {
          box-sizing: border-box;
          margin-right: 8px;
          padding: 3px 6px;
          font-size: 14px;
          background-color: #fff;
          color: #5094d5;
          border: 1px solid #eaeaef;
          height: 24px;
          line-height: 24px;
          border-radius: 2px;
          display: inline-block;
          cursor: pointer;
        }
      }
    }

    .box-article {
      .warpper {
        background: var(--article-srect-background);
        position: relative;
        height: 210px;
        padding: 5px;

        &::before {
          content: "";
          position: absolute;
          top: -80px;
          left: 0;
          width: 100%;
          height: 80px;
          z-index: 2;
          background: linear-gradient(180deg, rgba(55, 55, 55, 0), #ccc);
        }

        .item-title {
          color: #fff;
        }

        .item-box {
          border-radius: 10px;
          background-color: var(--background-color);
          height: 1.500px;
          margin-left: 10px;
          margin-right: 10px;
          margin-top: 10px;
          margin-bottom: 10px;
          overflow: hidden;

          span {
            background: linear-gradient(135deg, #ff74cd 10%, #ec7d0b);
            border-top-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding: 5px;
            font-size: 12px;
            color: #fff;
          }

          .neirong {
            text-align: center;
            margin-top: 15px;
            color: var(--text-color);
            font-size: 12px;
          }

          .btn {
            margin: 0 auto;
            display: block;
            margin-top: 20px;
          }
        }
      }
    }

    ::v-deep(.content) {
      color: var(--article-color);
      line-height: 30px;
      margin-top: 10px;
      padding: 10px;

      .hljs-center {
        text-align: center;
      }

      blockquote {
        position: relative;
        padding: 0 10px;
        color: #6a737d;
        border-left: 25px solid #dfe2e5;
        margin: 20px 0;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 10px 0;
      }

      table {
        background-color: var(--article-table-back-color);

        td {
          border: 1px solid var(--article-table-border-color);
          padding: 5px;
        }

        tr {
          background-color: var(--article-table-border-color);
          transition: all 0.3s ease-in-out;

          &:hover {
            background-color: var(--article-table-back-color);
            border: none;
          }
        }

        th {
          background-color: var(--article-table-back-color);
        }
      }

      p {
        a {
          text-decoration: none;
          color: #7bc549;

          &::after {
            content: "🔗";
          }
        }
      }

      code {
        vertical-align: middle;
        word-break: break-word !important;
        border-radius: 2px !important;
        overflow-x: auto !important;
        background-color: #fff5f5;
        color: #ff502c;
        font-family: 'Ali_R';
        font-size: 16px !important;
        padding: 6px 4px !important;
      }

      ol {
        margin-left: 20px;
      }

      pre {
        opacity: 1 !important;
        margin: 10px 0;
        color: #f8f8f2 !important;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;
        border-radius: 5px;

        code {
          line-height: 20px !important;
          font-size: 16px !important;
          vertical-align: top;
          padding: 10px !important;
          border-bottom-left-radius: 5px !important;
          border-bottom-right-radius: 5px !important;
          background-color: #303133 !important;
          color: #c0c4cc !important;
          width: -webkit-fill-available;
          width: -moz-available;
          display: inline-block;
        }
      }

      img {
        max-width: 100%;
        margin: 15px 0;
        border-radius: 5px !important;
        transition: box-shadow 0.35s, transform 0.35s;
        cursor: pointer;
        max-height: 500px;

        &:hover {
          box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.2);
          transform: translateY(-10px);
        }
      }

      ul {
        margin-left: 20px;
      }
    }

    .tag-share {
      display: flex;
      margin-right: 5px;
      align-items: center;
      padding-bottom: 15px;
      margin-bottom: 20px;
      position: relative;
      border-bottom: 1px solid var(--border-line);
      margin-top: 20px;
      justify-content: space-between;

      .tagBtn {
        margin-right: 5px;
      }

      .social-share {
        position: relative;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        height: 100%;
        display: flex;
        align-items: center;

        &:hover .share {
          transform: rotate(360deg);
        }

        .share-item {
          text-align: left !important;
          width: auto;
          display: none;
          margin-right: 15px;
          transition: display 0.3s ease-in-out;
        }

        .share {
          display: inline-block;
          font-size: 18px;
          width: 100%;
          height: 100%;
          font-weight: 700;
          text-align: center;
          color: #fff;
          background: #99f;
          border-radius: 50%;
          transition: all 0.3s;
        }

        .social-share-icon {
          margin-left: 10px;
          display: inline-block;
          width: 30px;
          height: 30px;
          font-size: 20px;
          border-radius: 50%;
          line-height: 30px;
          border: 1px solid #666;
          color: #666;
          text-align: center;
          vertical-align: middle;
          text-decoration: none;

          i {
            font-size: 25px;
          }
        }

        .icon-qzone {
          border-color: #fdbe3d;
          color: #fdbe3d;

          &:hover {
            background-color: #fdbe3d;

            i {
              color: white;
            }
          }
        }

        .icon-wechat {
          color: #7bc549 !important;
          border-color: #7bc549;

          &:hover {
            background-color: #7bc549;

            i {
              color: white;
            }
          }
        }

        .icon-weibo {
          color: #ff763b !important;
          border-color: #ff763b;

          &:hover {
            background-color: #ff763b;

            i {
              color: white;
            }
          }
        }

        .icon-qq {
          color: #56b6e7 !important;
          border-color: #56b6e7;

          &:hover {
            background-color: #56b6e7;

            i {
              color: white;
            }
          }
        }
      }
    }

    .wechatImg {
      img {
        width: 100%;
      }
    }

    .copyright {
      background-color: var(--text-color3);
      border-radius: 5px;
      width: 100%;
      min-height: 130px;
      position: relative;
      border: 1px dashed var(--theme-color);
      margin-top: 20px;

      &::before {
        content: "声明";
        background-image: linear-gradient(to right, #ffcc99, #ff99cc);
        width: 30%;
        padding: 5px;
        border-radius: 999px;
        position: absolute;
        top: -18px;
        left: 35%;
        text-align: center;
        border: 1px dashed var(--theme-color);
        font-weight: 700;
      }

      .copyrightItem {
        padding: 10px 10px;
        height: 100%;
        line-height: 26px;

        svg {
          width: 18px;
          height: 18px;
          margin-right: 3px;
          vertical-align: -4px;
        }

        .text {
          color: #909399;
          font-size: 14px;
          margin-left: 8px;
          text-decoration: none;
        }

        .name {
          color: var(--theme-color);
          font-weight: 700;
        }

        a:hover {
          color: var(--theme-color);
        }
      }

      .yuan {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }

    .comment-mian {
      margin-top: 30px;

      .title {
        font-weight: 700;
        font-size: 20px;
        margin-top: 20px;
        color: var(--article-color);

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}

.wxImg {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  margin-bottom: 15px;
}
</style>

<style>
.hljs {
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.mac-icon {
  height: 15px !important;
  display: flex;
  align-items: center;
  border: 1px solid #272822 !important;
  background-color: #272822 !important;
  padding: 8px !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

.mac-icon>span {
  display: inline-block !important;
  letter-spacing: 5px !important;
  word-spacing: 5px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 8px !important;
}

.mac-icon-red {
  background-color: red !important;
}

.mac-icon-yellow {
  margin-left: 10px;
  background-color: yellow !important;
}

.mac-icon-green {
  margin-left: 10px;
  background-color: green !important;
}

.mac-icon-lang {
  width: 50px !important;
  padding-left: 10px !important;
  font-size: 16px !important;
  vertical-align: top !important;
}

.copy-button {
  border-radius: 3px;
  padding: 5px !important;
  color: #ffffff !important;
  font-size: 100px;
  margin-left: auto;
}

.copy-button:hover {
  background-color: black !important;
}

.line-num-box {
  display: inline-block !important;
  color: #ccc !important;
  border-right: 2px solid #fff !important;
  line-height: 20px !important;
  font-size: 16px !important;
  text-align: right !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
</style>
